

<!-- 商品评价-添加 -->
<template>
	<view class="content">
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="评价晒单" rightBtnType="msgCenter" colorTheme="black" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>

		<!-- 商品信息 -->
		<view class="goodInfo-Container">
			<image class="goodImage" :src="imgSite + orderGoodsDetail.goodsBaseInfo.coverPicture" mode=""></image>
			<view class="goodNameSpec">
				<view class="goodName ellipsis2">
					{{orderGoodsDetail.goodsBaseInfo.goodsName}}
				</view>
				<view class="goodSpec ellipsis1">
					{{ orderGoodsDetail.goodsBaseInfo.attributes | getSpecStr }}
				</view>
			</view>
		</view>

		<!-- 星星 -->
		<view class="saleInfo-Container applyDetail-Container">
			<view style="height: 10upx;"></view>
			<!-- <view class="oneRow">*全部5星好评可额外获赠50积分</view> -->
			<view class="stars">
				<view class="name">商品评价</view>
				<view class="star">
					<image :src="icon.star_r" v-for="(item, index) of sp_star_change" :key="'sp_'+index" @click="clickrStar('sp', index)"></image>
					<image :src="icon.star_g" v-for="(item, index) of 5 - sp_star_change" :key="'sp1_'+index" @click="clickgStar('sp', index)"></image>
				</view>
			</view>
			<view class="stars">
				<view class="name">物流评价</view>
				<view class="star">
					<image :src="icon.star_r" v-for="(item, index) of wl_star_change" :key="'wl_'+index"  @click="clickrStar('wl', index)"></image>
					<image :src="icon.star_g" v-for="(item, index) of 5 - wl_star_change" :key="'wl1_'+index"  @click="clickgStar('wl', index)"></image>
				</view>
			</view>
			<view class="stars">
				<view class="name">服务评价</view>
				<view class="star">
					<image :src="icon.star_r" v-for="(item, index) of fw_star_change" :key="'fw_'+index"  @click="clickrStar('fw', index)"></image>
					<image :src="icon.star_g" v-for="(item, index) of 5 - fw_star_change" :key="'fw1_'+index"  @click="clickgStar('fw', index)"></image>
				</view>
			</view>
			<view style="margin-bottom: 44rpx;"></view>
			<uploadProof placeholderText="请输入评价内容......" @contentChange="contentChange" :upLoadLists="upLoadLists" @deleteImage="deleteImage" @chooseImage="chooseImage"></uploadProof>
		</view>

		<!-- 提交申请 -->
		<view class="submitAddSale" @tap="submitAddEvaluate()">提交评价</view>

		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	import uploadProof from '@/components/uploadProof/uploadProof';

	export default {
		filters: {
			
			//已选规格Str 
			getSpecStr(json) {
				try{
					var str = "";
					json = JSON.parse(json.goodsCategoryAttr);
					for(var i = 0; i < json.length; i++) {
						str += (json[i]["value"] + ' ');
					}
					return str;
				}catch(e){
					return "";
				}
			}
		},
		components: {
			navHeader,
			detailMenu,
			uploadProof
		},
		computed: {
			...mapState(['imgSite', 'apiSite'])
		},
		data() {
			return {
				icon: {
					backBtn: '/static/images/common/return.png',
					menuBtn: '/static/images/common/menuBtn.png',
					rightBtn: '/static/images/afterSale/addSale/rightBtn.png',
					addressIcon: '/static/images/afterSale/addSale/addressIcon.png',
					star_g: '/static/images/shop/star-g.png',
					star_r: '/static/images/shop/star-r.png'
				},

				//详情菜单
				showDetailMenu: false,
				
				orderDetailId: "",
				orderGoodsDetail: {
					goodsBaseInfo: {},
				},

				remarkContent: "",
				upLoadLists: [],
				sp_star_change: 0,
				wl_star_change: 0,
				fw_star_change: 0
			};
		},
		onLoad(options) {
			this.orderDetailId = options.orderDetailId;
			this.getOrderGoodsDetail_fun();
		},
		onShow() {
			this.showDetailMenu = false;
		},
		methods: {

			//详情菜单
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},
			
			
			//商品信息
			getOrderGoodsDetail_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/findOrderGoodsInfoByOrderDetailIdForApi',
					method: "POST",
					data: {
						orderDetailId: that.orderDetailId
					},
					success: function(res) {
						if(res.data.success) {
							var goodsData = res.data.response;
							goodsData.goodsBaseInfo = JSON.parse(goodsData.goodsBaseInfo);
							that.orderGoodsDetail = res.data.response;
						}
					}
				});
			},
			
			
			//描述内容
			contentChange(content) {
				this.remarkContent = content;
			},


			// 上传图片
			chooseImage() {
				
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
				
						// #ifdef APP-PLUS
							uni.uploadFile({
								url: that.apiSite + '/u_avt', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
								}, 
								success: (uploadFileRes) => {
									that.upLoadLists.push(JSON.parse(uploadFileRes.data).response[0]);
								},
								fail:(res) =>{
									console.log(res);
								}
							});
						// #endif
						// #ifndef APP-PLUS
						that.$api.globalUtil.imgAjax({
							url: '/u_avt',
							method: 'POST',
							filePath: tempFilePaths[0],
							name: 'file',
							data: {},
							success: function(res) {
								that.upLoadLists.push(res.response[0]);
							}
						});		
						// #endif
					}
				});
			},
			
			
			// 删除图片
			deleteImage(index) {
				console.log("删除第："+index);
				this.upLoadLists.splice(index, 1);
			},
			
			
			// 评价星星
			clickrStar(type, num) {
				if (type === 'sp') 
					this.sp_star_change = num + 1;
					console.log(this.sp_star_change);
				if (type === 'wl') 
					this.wl_star_change = num + 1;
				if (type === 'fw') 
					this.fw_star_change = num + 1;
			},
			clickgStar(type, num) {
				if (type === 'sp') 
					this.sp_star_change += num + 1;
					console.log(this.sp_star_change);
				if (type === 'wl') 
					this.wl_star_change += num + 1;
				if (type === 'fw') 
					this.fw_star_change += num + 1;
			},
			
			// 提交评价
			submitAddEvaluate() {
				
				if(this.sp_star_change == 0) {
					this.$api.msg("请对商品评价!");
					return ;
				}
				if(this.fw_star_change == 0) {
					this.$api.msg("请对物流评价!");
					return ;
				}
				if(this.fw_star_change == 0) {
					this.$api.msg("请对服务评价!");
					return ;
				}
				if(!this.remarkContent) {
					this.$api.msg("请输入问题描述!");
					return ;
				}
				
				var that = this;
				uni.showLoading({
					title:'提交中'
				});
				
				console.log({
					orderDetailId: that.orderDetailId,
					goodsCd: that.orderGoodsDetail.goodsBaseInfo.goodsCd,
					salesAttrCd: that.orderGoodsDetail.goodsBaseInfo.attributes.attrCd,
					star: that.sp_star_change,
					transStar: that.wl_star_change,
					serviceStart: that.fw_star_change,
					img: that.upLoadLists.join(","),
					content: that.remarkContent
				});
				that.$api.globalUtil.requestAjax({
					url: '/GoodsApi/addGoodsEvaluateForApi',
					method: "POST",
					data: {
						orderDetailId: that.orderDetailId,
						goodsCd: that.orderGoodsDetail.goodsBaseInfo.goodsCd,
						salesAttrCd: that.orderGoodsDetail.goodsBaseInfo.attributes.attrCd,
						star: that.sp_star_change,
						transStar: that.wl_star_change,
						serviceStart: that.fw_star_change,
						img: that.upLoadLists.join(","),
						content: that.remarkContent
					},
					success: function(res) {
						if(res.data.success) {
							uni.hideLoading();
							uni.navigateBack({
								delta:1
							});
						}
					},
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	//商品信息
	.goodInfo-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		width: 100%;
		height: 202rpx;
		background: rgba(255, 255, 255, 1);

		.goodImage {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		.goodNameSpec {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 520rpx;
			height: 130rpx;

			.goodName {
				margin-top: 12rpx;
				max-width: 520rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.goodSpec {
				max-width: 520rpx;
				height: 55rpx;
				line-height: 55rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	//星星
	.saleInfo-Container {
		padding: 0 30rpx;
		background: rgba(255, 255, 255, 1);

		.oneRow {
			// padding-top: 60rpx;
			color: #FE5E49;
			font-size: 20rpx;
		}

		.stars {
			margin-top: 38rpx;
			display: flex;
			align-items: center;

			.name {
				width: 134rpx;
				font-size: 26rpx;
				color: #333333;
			}

			.star {
				width: 190rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 30rpx;
					height: 27rpx;
				}
			}
		}
	}

	//问题描述
	.applyDetail-Container {
		padding-bottom: 45rpx;
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 0 0 16rpx 16rpx;
	}

	//提交申请
	.submitAddSale {
		margin: 0 auto;
		margin-top: 106rpx;
		margin-bottom: 100rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #FE5E49;
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		// font-weight:500;
		color: rgba(255, 255, 255, 1);
	}
</style>



